<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>电子围墙</title>
<link href="${request.contextPath}/static/css/layout.css" rel="stylesheet" type="text/css" />
<link href="${request.contextPath}/static/css/cb.css" rel="stylesheet" type="text/css" />
<link href="${request.contextPath}/static/css/n.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="${request.contextPath}/static/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="${request.contextPath}/static/easyui/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="${request.contextPath}/static/easyui/demo/demo.css" />
<link rel="stylesheet" type="text/css" href="${request.contextPath}/static/js/laypage/skin/laypage.css" />
<script type="text/javascript" src="${request.contextPath}/static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="${request.contextPath}/static/js/vue/vue.min.js" charset="utf-8"></script>
<script type="text/javascript" src="${request.contextPath}/static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/js/laypage/laypage.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/laydate/laydate.js"></script>
</head>
<body>
	<div id="app">
		<table width="99%" border="0" align="center" cellpadding="0"
			cellspacing="0">
			<tr>
				<td width="1%" align="left" background="${request.contextPath}/static/images/b2.jpg"><img
					src="${request.contextPath}/static/images/b1.jpg" width="10" height="26" /></td>
				<td width="68%" background="${request.contextPath}/static/images/b2.jpg"><table width="124"
						border="0" align="left" cellpadding="0" cellspacing="0">
						<tr>
							<td width="20" align="left"><img src="${request.contextPath}/static/images/tz.gif"
								width="10" height="16" /></td>
							<td width="104" align="left" class="biao">查找电子围墙信息</td>
						</tr>
					</table></td>
				<td width="31%" align="right" background="${request.contextPath}/static/images/b2.jpg"><img
					src="${request.contextPath}/static/images/b3.jpg" width="9" height="26" /></td>
			</tr>
		</table>
		<table width="99%" border="0" align="center" cellpadding="3"
			cellspacing="1" bgcolor="#AEDEF4">
			<tr>
				<td align="center" bgcolor="#E2F7FE">
						<table width="80%" border="0" cellspacing="1" cellpadding="3">
							<tr>
								<td width="5%" align="right">姓名:</td>
								<td width="10%" align="left">
									<select name="mName" id="mName" style="width: 172px; height: 25px"></select>
								</td>
								<td width="5%" align="right">日期:</td>
								<td width="10%" align="left">
									<input type="text" id="time" size="15" placeholder="请选择日期" class="laydate-icon" onclick="laydate()"/>
								</td>
								<td align="left">
									<input type="button" id="querycheck" value="查找" />
								</td>
								<td width="10%" colspan="2" align="right">
									 <input type="button" onclick="outExcel()" value="导出Excle" />
								</td>
							</tr>
						</table>
				</td>
			</tr>
		</table>

		<table width="50%" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td height="5"></td>
			</tr>
		</table>
		<table width="99%" border="0" align="center" cellpadding="0"
			cellspacing="0">
			<tr>
				<td width="1%" align="left" background="${request.contextPath}/static/images/b2.jpg"><img
					src="${request.contextPath}/static/images/b1.jpg" width="10" height="26" /></td>
				<td width="68%" background="${request.contextPath}/static/images/b2.jpg"><table width="124"
						border="0" align="left" cellpadding="0" cellspacing="0">
						<tr>
							<td width="20" align="left"><img src="${request.contextPath}/static/images/tz.gif"
								width="10" height="16" /></td>
							<td width="104" align="left" class="biao">电子围墙信息列表</td>
						</tr>
					</table></td>
				<td width="31%" align="right" background="${request.contextPath}/static/images/b2.jpg"><img
					src="${request.contextPath}/static/images/b3.jpg" width="9" height="26" /></td>
			</tr>
		</table>
		<table width="99%" border="0" align="center" cellpadding="3"
			cellspacing="1" bgcolor="#AEDEF4" style="border: 1px solid #AEDEF4">
			<thead>
				<tr>
					<td width="5%" height="25" align="center" bgcolor="#EFFBFE">序号</td>
					<td width="14%" align="center" bgcolor="#EFFBFE">矫正单位</td>
					<td width="14%" align="center" bgcolor="#EFFBFE">手机号</td>
					<td width="15%" align="center" bgcolor="#EFFBFE">姓名</td>
					<td align="center" bgcolor="#EFFBFE">所在位置</td>
					<td align="center" bgcolor="#EFFBFE">时间</td>
					<td align="center" bgcolor="#EFFBFE">状态</td>
					<td align="center" bgcolor="#EFFBFE">管理操作</td>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item,index) in result"
					onmouseout="this.style.backgroundColor='#ffffff'" bgcolor="#ffffff"
					onmouseover="this.style.backgroundColor='#E6F2FF'">
					<td height="25" align="center">{{index+1}}</td>
					<td align="center" class="t5"><div align="center">
							<strong>{{item.jname}}</strong>
						</div></td>
					<td align="center">{{item.phonenum}}</td>
					<td align="center">{{item.name}}</td>
					<td align="center">{{item.location}}</td>
					<td align="center">{{new Date(item.times).toLocaleString()}}</td>
					<td align="center">{{item.state}}</td>
					<td align="left">
						<div align="left" style="padding-left: 5px">
							<div align="center">
								<a href="#" @click="noteEvent(item.pid)">短信</a>
								<a href="#" @click="locationEvent(item.pid)">位置</a>
								<a href="#" @click="outlineEvent(item.pid)">违规</a>
								<a href="#" @click="leaveEvent(item.pid)">请假</a>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td colspan="6" align="center">
						<div id="pagediv"></div>
					</td>
				</tr>
			</tbody>
		</table>
	
		<div id="dlg"></div>
	
		<div id="dlg1"></div>
		<div id="dlg2"></div>
		<div id="dlg3"></div>
		<script>
		var app = new Vue({
			el : '#app',
			data : {
				result : []
			}
		});
		//搜索栏下拉框显示
		var getPersonList = function() {
			$('#mName').combobox({
				dataType : "json",
				url:'${request.contextPath}/usermap/mSelect',
			    valueField:'id',    
			    textField:'name',
			    onLoadSuccess : function() {  
					$("#mName").combobox("setValue", "请选择矫正人");
				 }	
			});
		}
		getPersonList();
		//模糊查询
		var getPageList = function(curr) {
			$.ajax({
				dataType : "json",
				url : "${request.contextPath}/usermap/getWall",
				data : {
					pageNum : curr || 1,
					pageSize : 10,
					cname : $('#mName').combobox('getText'),
					times : $("#time").val()
				},
				//显示分页
				success : function(msg) {
					app.result = msg.data[0].result;
					laypage({
						cont : 'pagediv', //容器。值支持id名、原生dom对象，jquery对象,
						pages : msg.data[0].totalPage, //总页数
						first : "首页",
						last : "尾页",
						skip : true, //是否开启跳页
						skin : '#5675A2',
						curr : curr || 1, //当前页
						jump : function(obj, first) { //触发分页后的回调
							if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
								getPageList(obj.curr);
							}
						}
					});
				}
			});
		}
		//获取列表
		getPageList();
		//模糊查询期满登记事件
		$('#querycheck').on('click', function() {
			getPageList();
		});
		
	//短信	
	function noteEvent(id){
	$('#dlg').dialog({
				title : '短信',
				width : 680,
				height : 360,
				closed : false,
				cache : false,
				href : '${request.contextPath}/usermap/duanxin1?id=' + id,
				modal : true,
	
	});
	}
	//位置
	function locationEvent(id){
	$('#dlg1').dialog({
				title : '位置',
				width : 680,
				height : 360,
				closed : false,
				cache : false,
				href : '${request.contextPath}/usermap/dingwei?id=' + id,
				modal : true
	});
	
	}
	//违规
	function outlineEvent(id){
	
	$('#dlg2').dialog({
				title : '违规',
				width : 680,
				height : 360,
				closed : false,
				cache : false,
				href : '${request.contextPath}/usermap/weigui1?id=' + id,
				modal : true
	});
	}
	//请假
	function leaveEvent(id){
	$('#dlg3').dialog({
				title : '请假',
				width : 680,
				height : 360,
				closed : false,
				cache : false,
				href : '${request.contextPath}/usermap/qingjia1?id=' + id,
				modal : true
	
	});
	}
								
		
		
		</script>
</body>
</html>